@extends('layouts.back_stage')
@section('content')
    <style>
     ::-webkit-scrollbar {height: 8px;}
     [v-cloak] {display: none;}
    .input-item{width:180px;padding-right: 0;margin-right:10px;}
    .shopBg{background:#fff;overflow: hidden;margin:10px 0 10px 0;}
    .centerLi{float:left;height:100px;width:33%;border-right:1px solid #000;text-align:center;}
    .centerLi>h3{line-height:100px}
    .shopBgleft{float:left;overflow: hidden;width:49.5%;padding:10px}
    .shopBgRight{float:right;overflow: hidden;width:50%;padding:10px}
    .textarta{width:500px}
    .el-table--small th {padding:0px}
    .inputTab{padding: 0 10px 10px 0;width:250px}
    .tb-edit .el-input {display: none}
    .tb-edit .current-row .el-input {display: block}
    .tb-edit .current-row .el-input+span {display: none}
    </style>
    <div class="container">
        <div style="padding:20px 20px 10px 0;overflow:hidden;"><h3 style="float:left;">新增采购单</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="guanLi" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:9px 30px;background:#fff;">
                            <label>加工厂：&nbsp;</label>
                            <el-autocomplete class="inline-input" v-model="state1"  :fetch-suggestions="querySearch" placeholder="请输入加工厂" size="small" :trigger-on-focus="false"   @select="handleSelect" >
                            </el-autocomplete>
                            <label> &nbsp; &nbsp;收货仓库：</label>
                            <el-select  size="small" class="selent" v-model="input_c" @change="typeValue">
                                <el-option  v-for="itme in entrepot"  :key="itme.value" :value="itme.value" :label="itme.text">@{{itme.text}} </el-option>     
                            </el-select>
                            <div  style="margin-top:20px;overflow:hidden;"> 
                                <div style="float:left">
                                <label >  &nbsp; &nbsp;备注:&nbsp;&nbsp; &nbsp;</label>
                                </div> 
                                <div style="float:left">
                                    <el-input type="textarea"  v-model="input_d" class="textarta"></el-input>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="shopBg" style="padding:15px">
                    <div style="float:left">
                          <el-button type="primary" class="touching"  @click='tebMinShow' size="small" >输入款号</el-button>
                          <el-button type="primary" class="touching"  @click="tab2remove" size="small" >删除行</el-button>
                    </div>
                    <el-dialog title="款号查询"  :visible.sync="dialogVisible" width="58%"  :before-close="handleClose">
                            <div>
                  <label>款号：</label>
                  <el-autocomplete class="inputTab" v-model="state2"  :fetch-suggestions="querySearch2" placeholder="请输入款号" size="small" :trigger-on-focus="false"  @select="handleSelect2" >
                    </el-autocomplete>
                                    <el-button type="primary" class="touching"  @click="inputVal" size="small" >确认</el-button>
                                    <el-button type="primary" class="touching"   @click="inputRemove"  size="small" >取消</el-button>
                                <el-table :data="tableData"  border :resizable='false'  size="small" @selection-change="handleSelectionChange"  style="width:100%">
                                    <el-table-column type="selection"  :resizable='false' width="45"> </el-table-column>
                                    <el-table-column prop="girard" :resizable='false'  label="款号" align="center"  min-width="120"> </el-table-column>
                                    <el-table-column prop="size_price"  :resizable='false' label="吊牌价/元" align="center" width="100"> </el-table-column>
                                    <el-table-column prop="color"  :resizable='false' label="颜色" align="center" width="100"> </el-table-column>
                                    <el-table-column prop="year"  :resizable='false' label="年份" align="center" width="100"> </el-table-column>
                                    <el-table-column prop="quarter" :resizable='false'  label="季节" align="center" width="80"> </el-table-column>
                                    <el-table-column prop="brandname" :resizable='false'  label="品牌" align="center" width="100"> </el-table-column>
                                    <el-table-column prop="size_group"  :resizable='false' label="类型" align="center" width="80"> </el-table-column>
                                </el-table>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button  size="small" type="primary" @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" size="small"  @click="addsibmit">确 定</el-button>
                            </span>
                     </el-dialog>       
                </div> 
                <div class="shopBg" style="padding:20px">
                    <el-table :data="tableData2" border size="small"  :resizable='false'  @selection-change="tab2Change" style="width: 100%" class="tb-edit">
                            <el-table-column type="selection"  :resizable='false'  width="45"> </el-table-column>
                            <el-table-column prop="year"  :resizable='false' align="center" label="年份" width="70"  >  </el-table-column>
                            <el-table-column prop="quarter"  align="center"  :resizable='false' label="季节" width="60"> </el-table-column>
                            <el-table-column prop="cate"  align="center"  :resizable='false' label="类型" width="100" > </el-table-column>
                            <el-table-column  prop="girard" align="center" :resizable='false'  label="款号" min-width="130" > </el-table-column>
                            <el-table-column prop="color"  align="center"  :resizable='false' label="颜色" width="60" >  </el-table-column>
                            <el-table-column  prop="size_price" align="center"  :resizable='false' label="吊牌价/元" min-width="100" ></el-table-column>
                        <el-table-column v-for="(item ,index) in sizeGr" :key="index"    :resizable='false' align="center" :label="item.key76"  width="70" :resizable='false'>
                                <el-table-column :label="item.key75" prop="item.key_0"  :resizable='false'   align="center" width="70" :resizable='false'>
                                    <el-table-column :label="item.key79" width="70"  align="center"  :resizable='false'  :resizable='false'>
                                    <el-table-column :label="item.key154" width="70" :resizable='false'  align="center">
                                            <el-table-column :label="item.key146" width="70" :resizable='false'  align="center">
                                                <el-table-column :label="item.key161" width="70" :resizable='false'  align="center">
                                        <el-table-column :label="item.key77" width="70"  align="center" :resizable='false'   :resizable='false'>
                                            <el-table-column :prop="item.key_0" :label="item.key140"  :resizable='false' align="center" width="70" :resizable='false'>
                                                <template scope="scope"> 
                                                    <span v-if="item.key_0==='size_group'">	                                 
                                                        @{{scope["row"][item["key_0"]] }}
                                                    </span >
                                                    <span v-else>
                                                        <span v-if="index<=scope.row.num.length">
                                                            <el-input size="small"  onkeyup = "value=value.replace(/[^\d]/g,'')"  style="width:100%;height:100%;padding:0px"   :resizable='false'  maxlength='3'   v-model="scope['row']['num'][index-1]" @blur="input_blur(scope['row']['num'][index-1],scope)"  ></el-input>
                                                            <span>@{{scope['row']['num'][index-1]}}</span>
                                                        </span>
                                                    </span>
                                               </template> 
                                            </el-table-column>
                                        </el-table-column>
                                          </el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                    </el-table-column>
                                </el-table-column>
                            </el-table-column>
                      </el-table>     
                </div> 
                  <div style="float:right;margin-right:20px">
                     <el-button type="primary" class="touching"  @click="sibmin" size="small" >保存</el-button>
                  </div>
            </div>
        </div>
        <!-- /主体-->
    </div>
    <script>
        new Vue({
            el: '#guanLi',
            data:{
                tableData:[],
                state1: '',
                state2:'',
                role:'',
                tableData2:[],
                dialogVisible:false,//
                sizeGr:[],//tab2 尺码
                chekboxId:[],
                supplier:[],
                cheTab2:[],
                input_value:'',//搜索点击显示input内容
                input_a:'',
                input_b:'',
                input_c:'',
                input_d:'',
                entrepot:[],//所有仓库
                clien:[],
            },
            created(){
               
               
            },
            mounted(){
                this.common();
                this.demand();
              //  this.client();
            },
            methods:{
               
                keyUp(val,scope){
                    console.log(val,scope)
                 var rest=/^([0-9]\d?|100)$/;           
                if(!rest.test(val)){
                    this.$notify.error({
                            title: '提示',
                            message: '你输入的数量有误请输入0-100以内的数量',
                        });
                       val=0 
                     return false;
                    }else{
                        Number(val)
                    }
                },
                inputRemove(){
                    this.state2=''
                },
                
                querySearch(queryString, cb) {
                        let self = this
                        $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type: 'get',
                        dataType:'json',
                        url: '/supplier/index/',
                        data:{
                            name:this.state1,
                            all:1
                        },
                        success:function(res){
                            if(res.result.success){
                                var results=[];
                                for(var i=0;i<res.content.data.length;i++){
                                    results.push({
                                        'value':res.content.data[i].name,
                                        'id':res.content.data[i].id
                                    })
                                }
                                clearTimeout(this.timeout);
                                this.timeout = setTimeout(() => {
                                    cb(results);
                                }, 2000 * Math.random());
                                $(".el-autocomplete-suggestion.el-popper.is-loading").show();
                            }else{
                                self.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                            }
                        }
                    })
              },
           querySearch2(queryString, cb) {
                        let self = this
                        $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type: 'get',
                        dataType:'json',
                        url: '/distribute/design/girard-search',
                        data:{
                            girard:this.state2
                        },
                        success:function(res){
                            if(res.result.success){
                                var results=[];
                                for(var i=0;i<res.content.length;i++){
                                    results.push({
                                        'value':res.content[i].girard,
                                         'id':res.content[i].id,
                                    })
                                }
                                clearTimeout(this.timeout);
                                this.timeout = setTimeout(() => {
                                    cb(results);
                                }, 2000 * Math.random());
                                $(".el-autocomplete-suggestion.el-popper.is-loading").show();
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                });
                                }
                        }
                    })
              },
             //下拉选择之后的值
                handleSelect2(item) {
                },
                        //下拉选择之后的值
                handleSelect(item) {
                    this.role=item.id
                },
              input_blur(val,scope){
                var rest=/^([0-9]\d?|100)$/;           
                if(!rest.test(val)){
                    this.$notify.error({
                            title: '提示',
                            message: '你输入的数量有误请重新输入0-100以内的数量',
                        });
                    
                     return false;
                    }
              },
                 /*编辑*/
                 handleEdit(scope) {
                },
                  // 多选框事件
                  handleSelectionChange(val){
                    this.chekboxId=[]
                    for(var e in val){
                        this.chekboxId.push(val[e])
                    }
                },
                //tab2点击多选框
                tab2Change(val){
                    this.cheTab2=[]
                    for(var w in val){
                        this.cheTab2.push(val[w])
                    }
                },
                //删除行
                tab2remove(){
                    let that=this
                    let  opt=[]
                    let  aa=[]
                    let  bb=[]
                    let  cc=[]
                    if(this.cheTab2==''){
                        this.$notify.error({
                                title: '警告',
                                message: '请选择你要删除的项',
                               
                                });
                            return false;
                       }
                       that.$confirm('你确定要删除选中的项吗？, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                                for(var w of this.cheTab2){
                                    that.tableData2.forEach((item,idx)=>{
                                        if(w.id==item.id){
                                            this.tableData2.splice(idx,1)
                                            return
                                        }
                                    })      
                                }     
                                that.$message({
                                type: 'success',
                                message: '删除成功!'
                             });
                            }).catch(() => {
                                that.$message({
                                type: 'info',
                                message: '已取消删除'
                            });          
                        });
                },
                //款号查询提交按钮
                addsibmit(){
                    if(this.chekboxId==''){
                        this.$notify.error({
                                title: '警告',
                                message: '请选择你要添加的项',
                               
                                });
                            return false;
                      }
                      var arrs=[];
                      for(var e in this.chekboxId){
                       this.tableData2.push(this.chekboxId[e])
                      }
                     this.dialogVisible=false
                },
                //对话框的X
                handleClose(done) {
                        this.dialogVisible=false
                    },
                //仓库下拉
                typeValue(val){
                },
                //保存提交
            sibmin(){
                  let that=this
                     if(this.role==''){
                        this.$notify.error({
                            title: '警告',
                            message: '请先选择有效的加工厂',
                           
                            });
                        return false;
                     }
                  if(this.input_c==''){
                        this.$notify.error({
                            title: '警告',
                            message: '请先选择仓库',
                           
                            });
                        return false;
                     }
                    if(this.tableData2==''){
                        this.$notify.error({
                            title: '警告',
                            message: '请先选择要新增的货物',
                           
                            });
                        return false;
                     }
                   
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                           },
                        type: 'post',
                        url: '/distribute/deliver/store',
                        data: {
                            input_a:this.role,
                            input_c:this.input_c,
                            input_d:this.input_d,
                            table:this.tableData2

                        },
                        success: function (res) {
                            if(res.result.success=true){
                                that.$notify.success({
                                title: '提示',
                                message: '新增采购单采购',
                              });
                              window.location.href=`/distribute/arrival/indexpage`;
                            }else{ 
                                that.$notify.error({
                                    title: '提示',
                                    message: res.result.errorMsg,
                                 });
                            }
                        }
                    })
                },
                //搜索点击确认按钮
                inputVal(){
                    let that=this
                    let text=[]
                    let color=[]
                    let num=[0,0,0,0,0,0,0,0,0]
                    if(this.state2==''){
                            this.$notify({
                            title: '警告',
                            message: '请输入款号',
                            type: 'warning'
                            });
                        return false;
                        }
                   $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'get',
                        url: '/distribute/design/girard-search',
                        data: {
                            girard:this.state2,
                        },
                        success: function (res) {
                            if(res.content!=''){
                            res.content.forEach(function (item, index) {
                                let colors = item.color.split(',');
                                let size = item.size.split(',');
                                let data = [];
                                let i = 100;
                                colors.forEach(function (subitem, subindex) {
                                    i++;
                                    data.push({
                                        'girard': item.girard,
                                        'size_price': item.size_price.split(',')[0],
                                        'year': item.year,
                                        'quarter': item.quarter,
                                        'size_group': item.size_group,
                                        'color': subitem,
                                        'size': item.size,
                                        'brandname':item.brandname,
                                        'cate3':item.cate3,
                                        'cate': item.cate.category_name,
                                        'num': new Array(size.length).fill(0),
                                        'id': i + item.id
                                    });
                                });
                                console.log(data)
                                that.tableData = data;
                                that.state2=''
                             });
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: '未找到你要查找的内容',
                                 });
                             } 
                        }
                    });  
                },
                 //点击输入款号 显示表
                tebMinShow(){
                    this.input_value=''
                    this.tableData=[]
                    this.dialogVisible=true
                },
                 /*尺码数据*/
                 common(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'post',
                        url: '/distribution/sizeGroupHead',
                        data: {
                            type:1,
                        },
                        success: function (data) {
                            if(data.result.success){
                                that.sizeGr=data.content.vertical;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                  //对话框弹出时请求仓库
               demand(){
                let that=this
                        $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type:'get',
                        url:'/distribute/warehouse/index',
                        dataType:'json',
                    }).then(function(res){
                        that.opt=res.content
                        for(var e in that.opt){
                            that.entrepot.push({
                                text:that.opt[e].type,
                                value:that.opt[e].id,
                            })
                        }
                    })
               },
               client(){
                let that=this
                        $.ajax({
                            
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        type:'get',
                        url:'/distribute/design/season-search',
                        dataType:'json',
                    }).then(function(res){
                        for(var e in res.content){
                            that.clien.push({
                                text:res.content[e].name,
                                value:res.content[e].id,
                            })
                        }
                    })
               },
            }
        });
    </script>
@endsection